<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['系统基础管理', '平台参数配置', 'Kafka推送配置']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>Kafka推送配置</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
				<div class="top_module top_module_box">
					<span class="module_text">车牌号</span>
					<div class="s_hover_box">
						<select class="select2" id="carNumberSelect">
							<option value=''></option>
						</select>
						<div class="s_del_icon" (click)='del_carNumber()'>x</div>
					</div>
				</div>
				<div class="top_module top_module_box">
					<span class="module_text">Topic</span>
					<div class="s_hover_box" style="vertical-align: top">
					  <input
						type="text"
						class="module_inp top_module_select"
						[(ngModel)]="topic"
						placeholder="查询Topic"
					  />
					  <div class="s_del_icon" (click)="delhwTopic()">x</div>
					</div>
				  </div>
                <button class="btn btn-primary" (click)="table_search()">查询</button>
                <button type="button" class="btn btn-primary" (click)="openTopicModal(topicModal)">新增</button>
                <button class="btn btn-primary" type="button" (click)="openTopicRoleModal(topicRoleModal)">批量导入(角色)</button>
                <button class="btn btn-primary" type="button" (click)="showImportModal(weightModal)">批量导入(文件)</button>
              </div>
              <div class="right top-search">
                <input
                  type="text"
                  [(ngModel)]="searchKey"
                  (change)="table_search(searchKey)"
                  class="search-input"
                  placeholder="设备ID、topic、描述..."
                />
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="table_search(searchKey)">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>车牌号</th>
                    <th>设备ID</th>
                    <th>订阅主题(Topic)</th>
                    <th>描述</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>修改人</th>
                    <th>修改时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{ row.carNumber }}</td>
                    <td>{{ row.deviceId }}</td>
                    <td>{{ row.topics ? row.topics.join('，') : '' }}</td>
                    <td>{{ row.remark }}</td>
                    <td>{{ row.createBy }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>{{ row.updateBy}}</td>
                    <td>{{ row.updateTime}}</td>
                    <td>
                      <button type="button" (click)="del_row(row)" >删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>
</div>
<!-- 新增topic   弹窗-->
<section
  bsModal
  #topicModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg" style="width: 800px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeTopicModal(topicModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">
          <span >新增</span>
        </h4>
      </div>
     
      <form
        id="topicFormBox"
        class="form-horizontal"
        role="form"
        novalidate="novalidate"
        [saBootstrapValidator]="validatorTopicOptions"
      >
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">
                Topic
                <sup>*</sup>
              </label>
              <div class="col-xs-10">
                <input
                  class="form-control"
                  name="topics"
                  [(ngModel)]="topicForm.topics"
                  placeholder="请输入Topic"
                />
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">
                车牌号码
                <sup>*</sup>
              </label>
              <div class="col-xs-10">
                <div class="s_hover_box" style="width: 100%">
                  <select class="select2" name="deviceId" id="carNumberSelectAdd" style="width: 100%">
                    <option value=''></option>
                  </select>
                  <div class="s_del_icon" (click)='del_carNumber2()'>x</div>
                </div>
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">
                描述
              </label>
              <div class="col-xs-10">
               
                <textarea class="handleInfo form-control"  name="remark" [(ngModel)]="topicForm.remark" cols="30" placeholder="请输入描述" rows="4"></textarea>
              </div>
            </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="closeTopicModal(topicModal)">
            取消
          </button>
          <button type="button" class="btn btn-primary" (click)="topicSubmit(topicModal)">确认</button>
        </div>
      </form>
    </div>
  </div>
</section>
<!-- 新增topic 弹窗end-->

<!-- 新增角色topic   弹窗-->
<section
  bsModal
  #topicRoleModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg" style="width: 800px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeTopicRoleModal(topicRoleModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">
          <span >批量导入（角色）</span>
        </h4>
      </div>
      <form
        id="topicRoleFormBox"
        class="form-horizontal"
        role="form"
        novalidate="novalidate"
        [saBootstrapValidator]="validatorRoleOptions"
      >
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">
                Topic
                <sup>*</sup>
              </label>
              <div class="col-xs-10">
                <input
                  class="form-control"
                  name="topics"
                  [(ngModel)]="topicRoleForm.topic"
                  placeholder="请输入Topic"
                />
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">
                角色
                <sup>*</sup>
              </label>
              <div class="col-xs-10 s_fix_select2_width s_fix_select2">
                <div class="s_hover_box" style="width: 100%">
                  <!-- <input type="hidden" class="form-control" name="roleId" id="clearCarNumberFrom" [(ngModel)]='topicRoleForm.roleId' /> -->
                  <!-- <sa-select2 select2ElementID="roleSelect2" (optionSelected)="optionSelected($event)" [dataURL]="dataURL" [paramFormat]="paramFormat" matchSearch="true" style="width: 100%"></sa-select2>    -->
                  <select class="form-control select2" id="roleSelect2" name="roleId" style="width: 100%">
                    <option value=''></option>
                  </select>		
                </div>
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">
                描述
              </label>
              <div class="col-xs-10">
               
                <textarea class="handleInfo form-control"  name="remark" [(ngModel)]="topicRoleForm.remark" cols="30" placeholder="请输入描述" rows="4"></textarea>
              </div>
            </div>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="closeTopicRoleModal(topicRoleModal)">
            取消
          </button>
          <button type="button" class="btn btn-primary" (click)="topicRoleSubmit(topicRoleModal)">确认</button>
        </div>
      </form>
    </div>
  </div>
</section>
<!-- 新增角色topic 弹窗end-->

<!-- 导入弹框 -->
<div bsModal #weightModal="bs-modal"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
	aria-hidden="true">
	<div class="modal-dialog modal-lg" style="width: 800px">
		<div class="modal-content" >
			<div class="modal-header">
				<button type="button" class="close" (click)="cancelUp(weightModal)" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">批量导入（文件）</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<form class="form form-inline " role="form">
						<div class="row" style="margin-bottom: 24px;">
							<div class="form-group module_line">
								<button type="button" class="btn btn-primary" (click)="load_module()">下载模板</button>
								<span class="row" class="note">注：请先下载模板，采用模板编辑文件后上传</span>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-10" style="padding: 0;">
								<div class="clearfix module_line">
									<button type="button" class="btn btn-primary" style="width: 120px;">上传模板文件
										<input type="file" class="up" (change)="fileChange($event.target.files)"
											name="fileToUpload" (click)='clearFile()' [(ngModel)]='fileUp' type="file"
											placeholder='' />
									</button>
									<span class="row" class="note">注：格式excel</span>
								</div>
							</div>
						</div>
						<div *ngIf="fileToUpload">
							<label class="control-label col-sm-1"></label>
							<div>
								<ul>
									<li class="file_list"><i class="fa fa-file-text-o"
											style="margin-right: 12px;"></i>{{fileToUpload.name}}<i
											class="fa fa-check-circle green" style="margin-left: 60px;"></i></li>
								</ul>
							</div>
						</div>
					</form>
				</div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" (click)="cancelUp(weightModal)">取消</button>
				<button type="button" class="btn btn-primary" (click)="submitData(weightModal)">确认</button>
			</div>
		</div>
	</div>
</div>
<!-- 导入弹框 结束 -->